<template>
    <div class="banner" @mouseenter="stopAuto()" @mouseleave="startAuto()">
        <ul class="imgs" :style="{
            width:banners.length*200 + '%',
            marginLeft:-i*100 + '%'
        }">
            <li v-for="(item, index) in banners" :key="index">
                <img :src="item.url" :title="item.name">
            </li>
        </ul>
        <ul class="dots">
            <li v-for="(item,index) in banners" :key="index" :class="{active:index==i}"
                @click="i = index"
            ></li>
        </ul>
    </div>
</template>

<script>
export default {
    props:{
        banners:{
            type:Array,
            required:true
        },
        duration:{
            type:Number,
            default:2000 //默认属性值
        }
    },
    data() {
        return {
            i: 2,
            timer: null
        }
    },
    methods: {
        startAuto(){
            if(this.timer){
                return
            }
            this.timer = setInterval(()=>{
                this.i = (this.i+1) % this.banners.length
            },this.duration)
        },
        stopAuto(){
            clearInterval(this.timer)
            this.timer = null
        }
    },
    created() {
        this.startAuto()
    },
    destroyed() {
        this.stopAuto()
    }
}
</script>

<style scoped>
    *{margin: 0;padding: 0;}
    .banner{
        position: relative;
        width: 1080px;
        height: 300px;
        overflow: hidden;
        margin: 10px auto;
    }
    ul{
        list-style: none;
    }
    .imgs li{
        width: 1080px;
        height: 300px;
        float: left;
    }
    .imgs li img{
        width: 100%;
        height: 100%;
    }
    .dots{
        position: absolute;
        bottom: 10px;
        right: 0;
    }
    .dots li{
        width: 15px;
        height: 15px;
        background-color:#ccc;
        float: left;
        margin-right: 10px;
        border-radius: 50%;
        cursor: pointer;
    }
    li.active{
        background-color:yellow;
    }
</style>
